<template>
	<view>
		<view class='statusbar' :style="{paddingTop: systemBarHeight + 'px'}">
		</view>
		<view class="header">

			<image class='back' v-if="isback&&titlecolor=='white'" :src="imgurl+'whiteback.png'" alt=""
				@click='back()'></image>
			<image class='back' v-if="isback&&titlecolor=='black'" :src="imgurl+'back.png'" alt="" @click='back()'>
			</image>
			<text class='title' :class="titlecolor">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['title', 'isback', 'titlecolor'],
		data() {
			return {
				systemBarHeight:0,
				imgurl: getApp().globalData.imgurl,
			}
		},
		created() {
			this.getSysteminfo();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100vw;
		height: 80rpx;
		position: relative;
		
		.back {
			width: 25rpx;
			height: 46rpx;
			position: absolute;
			left: 32rpx;
			top: 18rpx;

		}

		.title {
			display: block;
			font-size: 42rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.black {
			color: #212121;
		}

		.white {
			color: #fff;
		}
	}
</style>
